<template>
	<view>
		<view @touchmove.prevent.stop class="shade" v-if="is_admin == 0">
			<view class="apply_title">抱歉！您不是超级管理员，无法浏览当前页面</view>
		</view>
		
		<movable-area style="width: 750rpx; height: 100vh !important;">
			<movable-view class="preview-box" @change="move" direction="all" @tap="$refs.openAddFrom.Show()" :x='x' :y="y">
				<view class="preview-true"><span>添加</span><span>类型</span></view>
			</movable-view>
			
			<view class="title">已有的报名表单：</view>
			
			<view v-for="(item, index) in extra_field_list" :key="index">
				<view class="tabbar-box">
					<view class="tabbar-box-title-box">
						<text class="tabbar-box-title">{{item.name}}</text>
						<view>
							<text @tap="onClickedit(index)" class="text">编辑</text>
							<text @tap="onClickdetail(index)" class="text">详情</text>
						</view>
					</view>
					<view v-show="detailShowIndex == index && detailShow == true ? true : false">
						<view class="table-title">
							<text class="table-text1">文字提示</text>
							<text class="table-text2">字段名称</text>
							<text class="table-text2">字段类型</text>
							<text class="table-text2">是否必填</text>
						</view>
						<view v-for="(item1,index1) in JSON.parse(item.extra_field_config)" :key="index1">
							<view class="data-box">
								<text class="data-text1">{{item1.toast}}</text>
								<text class="data-text1">{{item1.name}}</text>
								<text class="data-text1">{{item1.type.value}}</text>
								<view class="data-text2">
									<text>{{item1.necessary == true ? '是' : '否'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<openAlert BgColor="rgba(0,0,0,0.7)" ref="openAddFrom" :AlertClass="0" :AlertPosition="'center'" :shadeClose="false">
				<view class="openAddFrom-box">
					<view class="openAddFrom-title">添加表单</view>
					
					<view class="from-name">
						<text class="from-text"><span>*</span>表单名称：</text>
						<input focus v-model="name" placeholder="请输入表单名称" class="from-input" />
					</view>
					
					<diyfrom :extra_field_config="extra_field_config" @onclickdiyfrom="onclickdiyfrom" ref="diyfrom"></diyfrom>
					
					<view class="confrim-close-box">
						<text @tap="$refs.openAddFrom.Close()" class="confrim-close">取消</text>
						<text @tap="uploadFrom" class="confrim-confrim">确认</text>
					</view>
				</view>
			</openAlert>
			
			<!-- <openAlert BgColor="rgba(0,0,0,0.7)" ref="openEditFrom" :AlertClass="0" :AlertPosition="'center'" :shadeClose="false">
				<view class="open-edit-from-box">
					<view class="open-edit-from-title">编辑表单</view>
					
					<view class="open-edit-from-name">
						<text>表单名称:</text>
						<input v-model="from_list.name" class="open-edit-from-input" />
					</view>
					
					<view style="display: flex; align-items: center; justify-content: space-between; margin: 10rpx 0;">
						<view>
							<view style="color: #f00;font-size: 26rpx;">*报名表单已有姓名，电话字段</view>
							<view>附加报名表单字段：</view>
						</view>
							
						<view >
							<text @tap="$refs.openeditaddfrom.Show()" class="add-text">+添加字段</text>
							<text class="add-text" style="margin-left: 20rpx;" @click="onClickOpenEdit">编辑</text>
						</view>
					</view>
					
					<scroll-view scroll-y style="max-height: 650rpx;">
						<view class="table-title">
							<text class="table-text1">文字提示</text>
							<text class="table-text2">字段名称</text>
							<text class="table-text2">字段类型</text>
							<text class="table-text2">是否必填</text>
						</view>
					</scroll-view>
					
					<view v-for="(item, index) in parse_extra_field_config" :key="index">
						<view class="data-box">
							<text class="data-text1">{{item.toast}}</text>
							<text class="data-text1">{{item.name}}</text>
							<text class="data-text1">{{item.type.value}}</text>
							<view class="data-text2">
								<text>{{item.necessary ? '是' : '否'}}</text>
							</view>
						</view>
					</view>
					
					<view class="confrim-close-box">
						<text @tap="editfromclose" class="confrim-close">取消</text>
						<text @tap="uploadFrom" class="confrim-confrim">确认</text>
					</view>
					
				</view>
			</openAlert>
			
			<openAlert BgColor="rgba(0,0,0,0.7)" ref="openeditaddfrom" :AlertClass="0" :AlertPosition="'center'" :shadeClose="false" closeBtn>
				<view style="background-color: #fff; width: 650rpx; padding: 30rpx; border-radius: 10rppx;">
				</view>
			</openAlert> -->
			
			<openAlert BgColor="rgba(0,0,0,0.7)" ref="openEditFrom" :AlertClass="0" :AlertPosition="'center'" :shadeClose="false">
				<view class="open-edit-from-box">
					
					<view class="open-edit-from-title">编辑表单</view>
					<view class="open-edit-from-name">
						<text>表单名称:</text>
						<input v-model="from_list_name" class="open-edit-from-input" />
					</view>
					
					<view class="editfrom-box">
						<text>自定义表单数据：</text>
						<view>
							<text @tap="editAddFrom" class="add-text">+新增字段</text>
							<text class="add-text" style="margin-left: 20rpx;" @click="onClickEdit">{{delShow ? '退出' : '编辑'}}</text>
						</view>
					</view>
					
					<view class="table-title">
						<text class="table-text1">文字提示</text>
						<text class="table-text2">字段名称</text>
						<text class="table-text2">字段类型</text>
						<text class="table-text2">是否必填</text>
					</view>
						
					<scroll-view scroll-y style="max-height: 650rpx;">
						<view class="from-data">
							<view v-for="(item, index) in parse_extra_field_config" :key="index">
								<view class="data-box">
									<text class="data-text1">{{item.toast}}</text>
									<text class="data-text1">{{item.name}}</text>
									<text class="data-text1">{{item.type.value}}</text>
									<view class="data-text2">
										<text>{{item.necessary ? '是' : '否'}}</text>
										<image src="../../static/edit.png" class="left-img" v-show="delShow" @tap="editopeneditline(index)" />
										<image src="../../static/del.png" class="right-img" v-show="delShow" @tap="editdelfromline(index)" />
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				
					<view class="confrim-close-box">
						<text @tap="editfromclose" class="confrim-close">取消</text>
						<text @tap="editFromConfrim" class="confrim-confrim">确认</text>
					</view>
				</view>
				
				<openAlert BgColor="rgba(0,0,0,0.7)" closeBtn ref="openEditAddFrom" :AlertClass="0" :AlertPosition="'center'" :shadeClose="false">
					<view class="open-edit-add-from-box">
						<view class="open-edit-add-from-box-title">添加字段</view>
				
						<view class="toast">
							<text class="text">文字提示：</text>
							<input class="input" v-model="open_addfield.toast" placeholder="请输入文字提示" />
						</view>
				
						<view class="toast">
							<text class="text">字段名称：</text>
							<input class="input" v-model="open_addfield.name" placeholder="请输入字段名称" @blur="blur" />
						</view>
				
						<view class="toast">
							<text class="text">字段类型：</text>
							<xfl-select :list="selectList" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" ref="xflselect" :style_Container="'height: 35px; font-size: 16px; width: 100%'" :placeholder="open_editfield_value" :selectHideType="'hideAll'"
							 @change="onclickSelect">
							</xfl-select>
						</view>
				
						<view class="necessary">
							<text class="text">是否必填：</text>
							<checkbox-group @change="checkbox">
								<checkbox :checked="checked_value" value="true" color="#475dfc" style="transform:scale(0.9); width: 50rpx;" />
							</checkbox-group>
						</view>
						
						<!-- 单选值 -->
						<!-- <view v-show="radioShow" >
							<view style="display: flex; justify-content: space-between;">
								<text>单项选择器选项：</text>
								<view>
									<text @tap="openSelector" style="background-color: #475dfc; padding: 4rpx 10rpx; color: #fff; border-radius: 10rpx;">添加选项</text>
									<text @click="editradio" v-show="this.open_addfield.radioitem.length != 0" style="background-color: #475dfc; padding: 4rpx 10rpx; color: #fff; border-radius: 10rpx; margin-left: 20rpx;">{{delradio ? '退出' : '编辑'}}</text>
								</view>
							</view>
							
							<view v-show="this.open_addfield.radioitem.length != 0" >
								<view v-for="(item, index) in this.open_addfield.radioitem" :key="index">
									<view style="display: flex; justify-content: space-around; position: relative;">
										<view><text style="color: #999;">选项名：</text>{{item.key}}</view>
										<view><text style="color: #999;">选项值：</text>{{item.value}}</view>
										<image v-show="delradio" @click="delradiolist(index)" src="../../static/del.png" style="height: 50rpx; width: 50rpx; position: absolute; right: 0; top: 14rpx;"></image>
									</view>
								</view>
							</view>
						</view> -->
						
						<!-- 多选值 -->
						<!-- <view v-show="checkboxShow">
							<view style="display: flex; justify-content: space-between;">
								<text>多项选择器选项：</text>
								<view>
									<text @tap="openCheckbox" style="background-color: #475dfc; padding: 4rpx 10rpx; color: #fff; border-radius: 10rpx;">添加选项</text>
									<text @click="editcheckboxlist" v-show="this.open_addfield.checkboxitem.length != 0" style="background-color: #475dfc; padding: 4rpx 10rpx; color: #fff; border-radius: 10rpx; margin-left: 20rpx;">{{delradio ? '退出' : '编辑'}}</text>
								</view>
							</view>
							
							<view v-show="this.open_addfield.checkboxitem.length != 0" >
								<view v-for="(item, index) in this.open_addfield.checkboxitem" :key="index">
									<view style="display: flex; justify-content: space-around; position: relative;">
										<view><text style="color: #999;">选项名：</text>{{item.key}}</view>
										<view><text style="color: #999;">选项值：</text>{{item.value}}</view>
										<image v-show="delradio" @click="delcheckboxlist(index)" src="../../static/del.png" style="height: 50rpx; width: 50rpx; position: absolute; right: 0; top: 14rpx;"></image>
									</view>
								</view>
							</view>
						</view> -->
						
						<button @click="onClickComplete" class="but">完成</button>
					</view>
					
					
					<!-- 添加单选 -->
					<!-- <openAlert :BgColor="BgColor" closeBtn ref="openAlertSelector" :AlertClass="0" :AlertPosition="'center'"
					 :shadeClose="false">
						<view style="background-color: #fff; width: 650rpx; border-radius: 10rpx; padding: 30rpx; line-height: 70rpx;">
							<view style="text-align: center;font-size: 34rpx;">添加选项</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项名：</text><input placeholder="请输入选项名" v-model="selector_list.key" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项值：</text><input placeholder="请输入选项值" v-model="selector_list.value" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<button @click="onclickSelector" style="margin-top: 30rpx;">完成</button>
						</view>
					</openAlert> -->
					<!-- 添加多选 -->
					<!-- <openAlert :BgColor="BgColor" closeBtn ref="openAlertCheckbox" :AlertClass="0" :AlertPosition="'center'"
					 :shadeClose="false">
						<view style="background-color: #fff; width: 650rpx; border-radius: 10rpx; padding: 30rpx;line-height: 70rpx;">
							<view style="text-align: center;font-size: 34rpx;margin-bottom: 30rpx;">添加选项</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项名：</text><input placeholder="请输入选项名" v-model="selector_list.key" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项值：</text><input placeholder="请输入选项值" v-model="selector_list.value" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<button @click="onclickCheckbox" style="margin-top: 30rpx;">完成</button>
						</view>
					</openAlert> -->
				
				</openAlert>
				
				<openAlert BgColor="rgba(0,0,0,0.7)" closeBtn ref="openAlertFromEdit" :AlertClass="0" :AlertPosition="'center'" :shadeClose="false">
					<view class="open-edit-add-from-box">
						<view class="open-edit-add-from-box-title">编辑字段</view>
				
						<view class="toast">
							<text class="text">文字提示：</text>
							<input class="input" v-model="open_editfield.toast" />
						</view>
				
						<view class="toast">
							<text class="text">字段名称：</text>
							<input class="input" v-model="open_editfield.name" @blur="blur" />
						</view>
				
						<view class="toast">
							<text class="text">字段类型：</text>
							<xfl-select :list="selectList" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" ref="xflselect" :style_Container="'height: 35px; font-size: 16px; width: 100%'" :placeholder="open_editfield_value" :selectHideType="'hideAll'" @change="onclickSelect">
							</xfl-select>
						</view>
				
						<view class="necessary">
							<text class="text">是否必填：</text>
							<checkbox-group @change="checkbox">
								<checkbox value="true" color="#475dfc" :checked="open_editfield.necessary" style="transform:scale(0.9); width: 50rpx;" />
							</checkbox-group>
						</view>
						
						<!-- <view v-show="this.open_editfield.radioitem != 0" style="display: flex; justify-content: space-between;">
							<text>已有选项</text>
							<view>
								<text @tap="$refs.openAlertAdd.Show()" style="background-color: #475dfc; padding: 4rpx 10rpx;color: #fff; border-radius: 10rpx;">新增选项</text>
							</view>
						</view> -->
						
						<!-- <view v-show="this.open_editfield.checkboxitem != 0" style="display: flex; justify-content: space-between;">
							<text>已有选项</text>
							<view>
								<text @tap="$refs.openAlertAddCheck.Show()" style="background-color: #475dfc; padding: 4rpx 10rpx;color: #fff; border-radius: 10rpx;">新增选项</text>
							</view>
						</view> -->
						
						<!-- <view v-for="(item, index) in open_editfield.radioitem" :key="index">
							<view style="display: flex;align-items: center; line-height: 50rpx; position: relative;">
								<view style="width: 250rpx;"><text style="color: #999;">选项名：</text>{{item.key}}</view>
								<view><text style="color: #999;">选项值：</text>{{item.value}}</view>
								<view style="position: absolute; top: 0; right: 0;">
									<image @tap="editeditradio(index,0,'center')" src="../../static/edit.png" style="height: 50rpx; width: 50rpx;"></image>
									<image @click="editdelradio(index)" src="../../static/del.png" style="margin-left: 30rpx; height: 50rpx; width: 50rpx;"></image>
								</view>
							</view>
						</view> -->
						
						<!-- <view v-for="(item, index) in open_editfield.checkboxitem" :key="index">
							<view style="display: flex;align-items: center; line-height: 50rpx; position: relative;">
								<view style="width: 250rpx;"><text style="color: #999;">选项名：</text>{{item.key}}</view>
								<view><text style="color: #999;">选项值：</text>{{item.value}}</view>
								<view style="position: absolute; top: 0; right: 0;">
									<image @tap="editeditcheck(index,0,'center')" src="../../static/edit.png" style="height: 50rpx; width: 50rpx;"></image>
									<image @click="editdelcheck(index)" src="../../static/del.png" style="margin-left: 30rpx; height: 50rpx; width: 50rpx;"></image>
								</view>
							</view>
						</view> -->
						
						<button @click="onClickEditComplete" class="but">完成</button>
					</view>
					
					<!-- <openAlert :BgColor="BgColor" closeBtn ref="openAlertAdd" :AlertClass="0" :AlertPosition="'center'" :shadeClose="false">
						<view style="background-color: #fff; width: 650rpx; border-radius: 10rpx; padding: 30rpx; line-height: 70rpx;">
							<view style="text-align: center;font-size: 34rpx;">添加选项</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项名：</text><input placeholder="请输入选项名" v-model="selector_list.key" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项值：</text><input placeholder="请输入选项值" v-model="selector_list.value" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<button @click="onclickAdd" style="margin-top: 30rpx;">完成</button>
						</view>
					</openAlert> -->
					
					<!-- <openAlert :BgColor="BgColor" closeBtn ref="openAlertAddCheck" :AlertClass="0" :AlertPosition="'center'"
					 :shadeClose="false">
						<view style="background-color: #fff; width: 650rpx; border-radius: 10rpx; padding: 30rpx; line-height: 70rpx;">
							<view style="text-align: center;font-size: 34rpx;">添加选项</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项名：</text><input placeholder="请输入选项名" v-model="selector_list.key" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项值：</text><input placeholder="请输入选项值" v-model="selector_list.value" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<button @click="onclickAddcheck" style="margin-top: 30rpx;">完成</button>
						</view>
					</openAlert> -->
					
					<!-- <openAlert :BgColor="BgColor" closeBtn ref="openAlertEdit" :AlertClass="0" :AlertPosition="'center'"
					 :shadeClose="false">
						<view style="background-color: #fff; width: 650rpx; border-radius: 10rpx; padding: 30rpx; line-height: 70rpx;">
							<view style="text-align: center;font-size: 34rpx;">添加选项</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项名：</text><input placeholder="请输入选项名" v-model="selector_list.key" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项值：</text><input placeholder="请输入选项值" v-model="selector_list.value" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<button @click="onclickEdit" style="margin-top: 30rpx;">完成</button>
						</view>
					</openAlert> -->
					
					<!-- <openAlert :BgColor="BgColor" closeBtn ref="openAlertEditCheck" :AlertClass="0" :AlertPosition="'center'"
					 :shadeClose="false">
						<view style="background-color: #fff; width: 650rpx; border-radius: 10rpx; padding: 30rpx; line-height: 70rpx;">
							<view style="text-align: center;font-size: 34rpx;">添加选项</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项名：</text><input placeholder="请输入选项名" v-model="selector_list.key" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<view style="display: flex; align-items: center;">
								<text style="min-width: 150rpx;">选项值：</text><input placeholder="请输入选项值" v-model="selector_list.value" style="width: 450rpx; background-color: #eee;height: 60rpx; border-radius: 6rpx; padding: 0 10rpx;"/>
							</view>
							
							<button @click="onclickEditCheck" style="margin-top: 30rpx;">完成</button>
						</view>
					</openAlert> -->
				</openAlert>
			</openAlert>
			
			<loadmore :status="status"></loadmore>
		</movable-area>
	</view>
</template>

<script>
	import diyfrom from '../../components/admin/diyfrom.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import loadmore from '../../components/common/uni-load-more.vue'
	export default {
		components: {
			diyfrom,
			xflSelect,
			loadmore,
		},
		data() {
			return {
				x: 340,
				y: 600,
				extra_field_config: [],
				detailShow: false,
				detailShowIndex: -1,
				EditShowIndex: 0,
				name: '',
				extra_field_list: [],
				from_list: '',
				from_list_name: '',
				parse_extra_field_config: [],
				delShow: false,
				open_editfield_value: '',
				placeholder: '',
				join_list: [],
				open_editfield:[],
				open_addfield: {
					toast: '',
					name: '',
					type: [],
					necessary: '',
					radioitem: [],
					checkboxitem: [],
				},
				selectList: [
					{value: '输入框',key: 'string'}, 
					{value: '多行输入框',key: 'textarea'}, 
					{value: '单张图片',key: 'oneimg'}, 
					{value: '多张图片',key: 'manyimg'}],
				selector_list: {key: '', value: ''},
				checked_value: false,
				from_id: 0,
				status: 'more',
				page: 1,
				is_admin: 1,
			};
		},
		onLoad() {
			this.$comm.appLogin(user_info=>{
				this.extra_field_type_list()
			})
		},
		onReachBottom() {
			this.extra_field_type_list()
		},
		onPullDownRefresh() {
			this.PullDownRefresh()
		},
		mounted() {
			const { windowWidth, windowHeight } = uni.getSystemInfoSync();    
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
		},
		methods: {
			PullDownRefresh() {
				this.status = 'more'
				this.page = 1
				this.extra_field_list = []
				this.extra_field_type_list()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			
			editFromConfrim() {
				if (this.from_list_name == '') {
					this.showToast('表单名称不能为空', 'none', 2000)
					return
				}
				// console.log(JSON.stringify(this.parse_extra_field_config) == '{}',990099090)
				if (JSON.stringify(this.parse_extra_field_config) == '{}') {
					this.showToast('表单数据不能为空', 'none', 2000)
					return
				}
				this.$comm.request({
					url: 'api/extra_field_type_edit',
					method: 'POST',
					data: {
						id: this.from_id,
						name: this.from_list_name,
						extra_field_config: JSON.stringify(this.parse_extra_field_config),
					},
					success: (res) => {
						console.log(res, 'api/extra_field_type_edit')
						this.PullDownRefresh()
						this.$refs.openEditFrom.Close()
					}
				})
			},
			
			onClickEditComplete() {
				if (this.open_editfield.toast == '') {
					this.showToast('文字提示不能为空', 'none')
					return
				}
				if (this.open_editfield.name == '') {
					this.showToast('字段名称不能为空', 'none')
					return
				} else {
					let text = /^[a-zA-Z_]+$/;
					if (!text.test(this.open_editfield.name)) {
						this.showToast('字段名称只能为英文和下划线', 'none')
						return
					}
				}
				if (this.open_editfield.type == '') {
					this.showToast('字段类型不能为空', 'none')
					return
				}
				if (this.repeat == true) {
					this.showToast('字段名称存在重复', 'none')
					return
				}
				this.open_editfield.necessary = this.checked_value
				this.$set( this.parse_extra_field_config, this.radioInindex, this.open_editfield)
				this.open_editfield_value = ''
				this.placeholder = ''
				this.join_list = []
				this.$refs.openAlertFromEdit.Close();
			},
			
			editopeneditline(index) {
				this.radioInindex = index
				this.open_editfield = JSON.parse(JSON.stringify(this.parse_extra_field_config[index]))
				this.placeholder = this.open_editfield.type.value
				if (this.open_editfield.necessary != true) {
					this.checked_value = false
				} else {
					this.checked_value = this.open_editfield.necessary
				}
				this.open_editfield_value = this.open_editfield.type.value
				// console.log(this.open_editfield, this.placeholder, this.checked_value, 'editopeneditline')
				this.join_list = []
				for (let i = 0; i < this.parse_extra_field_config.length; i++) {
					this.join_list.push(this.parse_extra_field_config[i].name)
				}
				this.join_list.splice(index, 1)
				// console.log(this.join_list)
				this.$refs.openAlertFromEdit.Show();
			},
			
			editdelfromline(index){
				this.parse_extra_field_config.splice(index, 1)
			},
			
			onClickEdit() {
				this.delShow = !this.delShow
			},
			
			onClickComplete() {
				if (this.open_addfield.toast == '') {
					this.showToast('文字提示不能为空', 'none')
					return
				}
				if (this.open_addfield.name == '') {
					this.showToast('字段名称不能为空', 'none')
					return
				} else {
					let text = /^[a-zA-Z_]+$/;
					if (!text.test(this.open_addfield.name)) {
						this.showToast('字段名称只能为英文和下划线', 'none')
						return
					}
				}
				if (this.open_addfield.type == '') {
					this.showToast('字段类型不能为空', 'none')
					return
				}
				if (this.repeat == true) {
					this.showToast('字段名称存在重复', 'none')
					return
				}
				this.open_addfield.necessary = this.checked_value
				if (JSON.stringify(this.parse_extra_field_config) == '{}') this.parse_extra_field_config = []
				this.parse_extra_field_config.push(this.open_addfield)
				// this.page_from.push(this.open_addfield)
				this.open_addfield = {
					toast: '',
					name: '',
					type: [],
					necessary: '',
					radioitem: [],
					checkboxitem: []
				},
				// console.log(this.page_from, 'page_from', this.open_addfield)
				this.$refs.xflselect.onClear()
				this.extra_field_type_list()
				this.$emit('onclickdiyfrom',this.page_from)
				this.open_editfield_value = '请输入'
				this.join_list = []
				this.$refs.openEditAddFrom.Close();
			},
			
			checkbox() {
				if (this.checked_value == true) {
					this.checked_value = false
				} else {
					this.checked_value = true
				}
			},
			
			onclickSelect(e) {
				this.open_addfield.type = e.orignItem
				this.open_editfield.type = e.orignItem
				// console.log(e,this.open_addfield)
				// if (e.orignItem.key == 'radio') {
				// 	this.radioShow = true
				// 	this.checkboxShow = false
				// } else if (e.orignItem.key == 'checkbox') {
				// 	this.checkboxShow = true
				// 	this.radioShow = false
				// } else {
				// 	this.checkboxShow = false
				// 	this.radioShow = false
				// }
				this.selector_list = {
					key: '',
					value: ''
				}
			},
			
			blur: function(event) {
				this.repeat = false
				// console.log(event.target.value)
				for (let i = 0; i < this.join_list.length; i++) {
					if (event.target.value == this.join_list[i]) {
						this.showToast('字段名称存在重复', 'none')
						this.repeat = true
						return
					}
				}
			},
			
			editAddFrom() {
				this.open_editfield_value = '请输入'
				this.join_list = []
				
				for (let i = 0; i < this.parse_extra_field_config.length; i++) {
				   this.join_list.push(this.parse_extra_field_config[i].name)
				}
				// console.log(this.join_list)
				this.$refs.openEditAddFrom.Show();
			},
			
			editfromclose() {
				// this.from_list = ''
				this.$refs.openEditFrom.Close()
			},
			
			onClickdetail(index) {
				this.detailShow = !this.detailShow
				this.detailShowIndex = index
			},
			
			onClickedit(index) {
				this.from_list = this.extra_field_list[index]
				this.from_list_name = JSON.parse(JSON.stringify(this.from_list.name))
				this.from_id = this.from_list.id
				this.parse_extra_field_config = JSON.parse(this.from_list.extra_field_config)
				this.EditShowIndex = index
				this.$refs.openEditFrom.Show()
			},
			
			uploadFrom() {
				if (this.name == '') {
					this.showToast('表单名称不能为空', 'none', 2000)
					return
				}
				if (this.extra_field_config.length == 0) {
					this.showToast('表单不能为空', 'none', 2000)
					return
				}
				this.$comm.request({
					url: 'api/extra_field_type_add',
					method: 'POST',
					data: {
						name: this.name,
						extra_field_config: JSON.stringify(this.extra_field_config)
					},
					success: (res) => {
						console.log(res, 'api/extra_field_type_add')
						// this.extra_field_type_list()
						this.$refs.openAddFrom.Close()
						setTimeout(() => {
							this.extra_field_type_list()
							this.showToast('添加表单成功', 'none', 2000)
						},300)
					}
				})
			},
			
			extra_field_type_list() {
				if (this.status == 'nomore') return
				this.$comm.request({
					url: 'api/extra_field_type_list',
					method: 'GET',
					data: {
						page: this.page++,
					},
					success: (res) => {
						console.log(res, 'api/extra_field_type_list')
						if (res.data.code == 202) {
							this.is_admin = 0
							return
						}
						let list = res.data.result.list
						this.extra_field_list = this.extra_field_list.concat(list)
						if (list.length < 10) this.status = 'nomore'
					}
				})
			},
			
			onclickdiyfrom(e) {
				this.extra_field_config = e
				console.log(e,this.extra_field_config,'onclickdiyfrom')
			},
			
			move(e) {
				this.x = e.detail.x;
				this.y = e.detail.y;
			},
			
			showToast(msg, icon, time) {
				uni.showToast({
					title: msg,
					icon: `${icon}`,
					duration: time,
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	page {
		font-size: 30rpx;
		background-color: #F5F5F5;
	}
	
	.shade {
			position: fixed;
			height: 100vh;
			z-index: 1000;
			background-color: rgba(0, 0, 0, .6);
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		
			.apply_title {
				color: #ffffff;
				font-size: 35rpx;
				margin-bottom: 20rpx;
			}
		}
	
	.title {
		position: relative;
		padding: 30rpx 30rpx 0 50rpx;
		margin-bottom: 20rpx;
	}
	
	.title::before {
		content: '';
		position: absolute;
		background-color: #475cfc;
		height: 40rpx;
		width: 10rpx;
		left: 30rpx;
		border-radius: 50rpx;
	}
	
	.open-edit-add-from-box {
		background-color: #fff;
		padding: 30rpx;
		width: 650rpx;
		line-height: 80rpx;
		border-radius: 10rpx;
	
		.open-edit-add-from-box-title {
			font-size: 34rpx;
			text-align: center;
			font-weight: bold;
		}
	
		.toast {
			display: flex;
			align-items: center;
	
			.text {
				min-width: 150rpx;
			}
	
			.input {
				background-color: #eee;
				width: 100%;
				border-radius: 10rpx;
				height: 60rpx;
				padding: 0 10rpx;
			}
		}
	
		.necessary {
			display: flex;
			justify-content: space-between;
		}
		
		.but {
			background-color: #475dfc;
			margin-top: 20rpx; 
			color: #fff;
		}
	}
	
	.openAddFrom-box {
		background-color: #fff; width: 650rpx; padding: 30rpx; border-radius: 10rpx;
		
		.openAddFrom-title {
			text-align: center; font-size: 34rpx;
		}
		
		.from-name {
			display: flex; align-items: center; width: 100%; margin-top: 20rpx;
			
			.from-text {
				width: 27%;
				
				span {
					color: #f00;
				}
			}
			.from-input {
				width: 73%; border-bottom: 2rpx solid #999; padding: 6rpx 10rpx;
			}
		}
	}
	
	.confrim-close-box {
		display: flex; justify-content: space-around;align-items: center;
		
		.confrim-close {
			padding: 20rpx 60rpx; border: 1px solid #aaa; border-radius: 10rpx; margin-top: 20rpx;
		}
		.confrim-confrim {
			padding: 20rpx 60rpx; border: 1px solid #475cfc; border-radius: 10rpx; margin-top: 20rpx; color: #fff; background-color: #475cfc;
		}
	}
	
	.open-edit-from-box {
		width: 650rpx; padding: 30rpx; background-color: #fff; border-radius: 10rpx;
		
		.open-edit-from-title {
			text-align: center; font-size: 34rpx;
		}
		
		.open-edit-from-name {
			display: flex; align-items: center; margin-top: 10rpx;
			
			text {
				color: #666;
			}
			
			.open-edit-from-input {
				border-bottom: 1px solid #999; padding: 6rpx 10rpx; width: 75%;
			}
		}
		
		.editfrom-box {
			display: flex; align-items: center; justify-content: space-between; line-height: 80rpx;
		}
	}
	
	.left-img {
		position: absolute;left: 0; top: 10rpx; width: 50rpx; height: 50rpx; border-radius: 50%;
	}
	
	.right-img {
		position: absolute;right: 0; top: 14rpx; width: 40rpx; height: 40rpx; border-radius: 50%;
	}
	
	.add-text {
		background-color: #475dfc;
		padding: 10rpx;
		border-radius: 10rpx;
		color: #fff;
	}
	
	.from-name {
		display: flex; align-items: center; width: 100%; margin-top: 20rpx; margin-bottom: 20rpx;
		
		.from-text {
			width: 27%;
			
			span {
				color: #f00;
			}
		}
		.from-input {
			width: 73%; border-bottom: 2rpx solid #999; padding: 6rpx 10rpx;
		}
	}
	
	.diyfrom-box {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
		width: 650rpx;
		
		.diyfrom-title {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.add-text {
				background-color: #475dfc;
				padding: 4rpx 10rpx; 
				border-radius: 10rpx;
				color: #fff;
			}
			
			.edit {
				margin-left: 20rpx;
				background-color: #475dfc;
				padding: 4rpx 10rpx;
				color: #fff; 
				border-radius: 10rpx;
			}
		}
		
		.diyfrom-tab {
			display: flex;
			text-align: center;
			line-height: 70rpx;
			margin-top: 10rpx;
			border: 2rpx solid #000;
			
			.table-text1 {
				width: 25%;
			}
			
			.table-text2 {
				border-left: 2rpx solid #000;
				width: 25%;
			}
		}
		
		.from-data {
			border-left: 2rpx solid #000;
			border-right: 2rpx solid #000;
			line-height: 70rpx;
		}
	}
	
	.table-title {
		display: flex;
		justify-content: space-around;
		line-height: 70rpx;
		background-color: #eee;
	
		.table-text1 {
			width: 25%;
			text-align: center;
			border: 2rpx solid #000;
		}
	
		.table-text2 {
			width: 25%;
			text-align: center;
			border: 2rpx solid #000;
			border-left: none;
		}
	}
	
	.data-box {
		display: flex;
		justify-content: space-around;
		border-right: 2rpx solid #000;
		border-left: 2rpx solid #000;
			
		.data-text1 {
			word-break:break-all;
			width: 25%;
			text-align: center;
			border-right: 2rpx solid #000;
			border-bottom: 2rpx solid #000;
			padding: 20rpx 0;
		}
			
		.data-text2 {
			width: 25%;
			text-align: center;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #000;
			position: relative; 
			align-items: center; 
			display: flex; 
			flex-direction: column;
		}
	}
	
	.tabbar-box {
		margin: 0 30rpx 20rpx 30rpx; background-color: #fff; padding: 0 20rpx; border-radius: 10rpx;
		
		.tabbar-box-title-box {
			display: flex; align-items: center; justify-content: space-between;
			
			.tabbar-box-title{
				line-height: 100rpx;
				font-size: 32rpx;
				width: 60%;
				font-weight: bold;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}
			
			.text {
				padding: 0 30rpx; color: #475cfc;
			}
		}
		
		.data-box {
			display: flex;
			justify-content: space-around;
			border-left: 2rpx solid #000;
			border-right: 2rpx solid #000;
		
			.data-text1 {
				word-break:break-all;
				width: 25%;
				text-align: center;
				border-right: 2rpx solid #000;
				border-bottom: 2rpx solid #000;
			}
		
			.data-text2 {
				width: 25%;
				text-align: center;
				border-bottom: 2rpx solid #000;
				position: relative; 
				align-items: center; 
				display: flex; 
				flex-direction: column;
				
				.img {
					position: absolute;right: 0; top: 10rpx; width: 50rpx; height: 50rpx; border-radius: 50%;
				}
			}
		}
	}
	
	.preview-box {
		background-color: rgba(71,92,252,0.8); 
		position: fixed !important; 
		height: 70rpx;
		width: 70rpx; 
		border-radius: 50%;
		padding: 20rpx;
		color: #fff; 
		right: 0rpx;
		z-index: 50;
		
		.preview-true {
			line-height: 35rpx;
			display: flex; 
			flex-direction: column; 
			align-items: center;
		}
	}
</style>
